const baseConfig = require('./webpack.base.js')
const {merge} = require('webpack-merge')

const devConfig = {
    mode: "development",
    optimization: {
        // 用文件的名字作为chunk的名字
        chunkIds: 'named',

        splitChunks: {
            // 任意模块都可以拆分
            chunks: 'all',
            cacheGroups: {
                // 屁用 node_modules 模块：
                vendors: {
                    name: 'vendors',
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    // 不需要重复拆跟 chunk
                    reuseExistingChunk: true
                },
                element: {
                    name: 'element',
                    test: /[\\/]node_modules[\\/]element-plus(.*)/,
                    // 注意优先级需要高于 vendors 的分包优先级
                    priority: 10,
                    // 不需要重复拆跟 chunk
                    reuseExistingChunk: true
                },

                custonChunk: {
                    test(module) {
                        // console.log(module.size())
                        // console.log(module.nameForCondition())
                        // console.log(module.context)
                        // 如果模块大于30kb，并且模块名字中包含node_modules, 就会被单独打包到一个文件中
                        return module.size() > 30000 &&
                            module.nameForCondition() && module.nameForCondition().includes('node_modules')
                    },
                    // 动态计算生成 bundle 名称
                    name(module) {
                        const packageNameArr = module.context.match(/[\\/]node_modules[\\/]\.pnpm[\\/](.*?)(\/|$)/)
                        const packageName = packageNameArr ? packageNameArr[1] : ''
                        return `chunk-lib.${packageName.replace(/@/g, "")}`;
                    },
                    priority: 20,
                    minChunks: 1,
                    reuseExistingChunk: true,
                }
            },
        },
    },
    // webpack5 本身就直接支持了热更新
    // 定义sourceMap
    devtool: "cheap-module-source-map",
    devServer: {
        port: Number(process.env.VUE_APP_PORT),
        // 启动完成之后自动打开
        open: JSON.parse(process.env.VUE_APP_OPEN),
        // 在访问资源 404 之后 自动导航到 index.html
        historyApiFallback: true,
    }
}

module.exports = merge(baseConfig, devConfig)

